/*
 * @Author: scopesang
 * @Date: 2022-04-08 09:19:37
 * @LastEditors: scopesang
 * @LastEditTime: 2022-04-08 09:34:42
 * @FilePath: \cms-manage\src\textApp\App02.jsx
 * @Description: 
 * 
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
 */
import React, { Component } from 'react'

export default class App11 extends Component {
    state = {
        books: [
            { id: 0, name: '老人与海' },
            { id: 1, name: '西游记' },
            { id: 2, name: '三国演义' }
        ]
    }
    delItem(index) {
        console.log(index, "index");
        let arr = JSON.parse(JSON.stringify(this.state.books))
        // splice() 方法向/从数组添加/删除项目，并返回删除的项目。
        // 注释：splice() 方法会改变原始数组。
        arr.splice(index, 1)
        this.setState({
            books: arr
        })

    }
    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.books.map((item, index) => {
                            return (
                                // 失去了唯一标识符的意义
                                <li key={index} >

                                    <strong>{item.name}{index}</strong>
                                    <i onClick={this.delItem.bind(this, index)}>删除</i>
                                </li>
                            )
                        })
                    }
                </ul>
                <button onClick={this.addItem.bind(this)}>追加一项</button>
            </div>
        )
    }
    addItem() {
        let obj = { id: 3, name: '红楼梦' }
        // 深拷贝
        let newBooks = JSON.parse(JSON.stringify(this.state.books));
        newBooks.unshift(obj)

        this.setState({
            books: newBooks
        })

        // 假如追加的这一项会导致整个数组重排，那怎么办？
        // 如果key使用了index,当数组重排时，就会导致索引对不上
        // 解决方案就是key尽量不适用index作为唯一标识符,尽量使用id
        //     .key值为index导致删除功能出问题：

        // 数组的key值，尽量不要用index，尤其是有删除功能的时候，这样会出问题：
        // index是区分数组里的每一个子元素的，用index作为key值，在删除的时候，比如删除了第一项，但是后续index改变，
        // 为0的是其它子元素（导致删除的可能是第二个子元素），（就是说index随着数组长度改变而改变，不像id之类的不会随之改变）


        // 随机生成id: $item.id + Math.random().toString(36).split(’.’)[1]
        // ————————————————
        // 版权声明：本文为CSDN博主「单身girl」的原创文章，遵循CC 4.0 BY - SA版权协议，转载请附上原文出处链接及本声明。

    }
}
